<template>
  <div class="deliveryConfirmat">
    <!-- 请添加收货地址 -->
    <div v-if="haveaddress === false" class="addaddress fz14">
      <van-cell title="请添加收货地址" is-link to="/address" />
    </div>
    <!-- 顶部地址 -->
    <div v-if="haveaddress === true" class="address">
      <div class="top fz14">
        <div class="location">
          <img src="@/assets/address copy备份 2@2x.png" />
        </div>
        <div class="name">{{ showAdd.shipping_name }}</div>
        <div class="tel">{{ showAdd.shipping_phone }}</div>
      </div>
      <div class="bottomtext fz12">
        {{ showAdd.shipping_address }}
      </div>
    </div>
    <!-- 提货商品 -->
    <div class="product">
      <div class="top">
        <img src="@/assets/店铺@2x.png" />
        <span class="text fz14">花栩初</span>
      </div>
      <cloudProductItem
        v-for="(item, index) in productItem"
        :key="index"
        :productItem="item"
        @changeGoodsNum="changeGoodsPrice"
      ></cloudProductItem>
      <!-- 底部计算价格 -->
      <div class="press fz14">
        <span>共{{ num }}件</span> 小计: <span>￥{{ total | numFilter }}</span>
      </div>
    </div>
    <!-- 配送方式 -->
    <div class="delivery fz14">
      <div class="item">
        <div class="left">配送方式</div>
        <div class="right">快递配送</div>
      </div>
      <div class="item">
        <div class="left">货品信息</div>
        <div class="right">提货</div>
      </div>

      <div class="item">
        <!-- <div class="left">配送方式</div> -->
        <!-- <van-field v-model="value" label="配送方式" placeholder="请输入" /> -->
        <van-field
          v-model="remark"
          label="配送方式"
          placeholder="请输入"
          input-align="right"
        />
        <!-- <input type="text" placeholder="请输入" /> -->
      </div>
    </div>
    <!-- 货款余额 -->
    <div class="payment fz14">
      <div class="item">
        <div class="left">货款余额</div>
        <div class="right fz16">￥{{ goodsMoney }}</div>
      </div>
      <div class="item">
        <div class="left">运费</div>
        <div class="right fz16">+￥0.00</div>
      </div>
    </div>
    <!-- 底部  notRight-->
    <!-- <div class="bottom" id="notRight"> -->
    <div class="bottom">
      <cloud-bottom>
        <template v-slot:left>
          <span
            >￥<span class="price fz24">{{ total | numFilter }}</span></span
          >
        </template>
        <template v-slot:right>
          <!-- <span @click="$router.push('/deliverySuccess')">确认提货</span> -->
          <span @click="goDelivery">确认提货</span>
        </template>
      </cloud-bottom>
    </div>
  </div>
</template>

<script>
import cloudBottom from './components/cloudBottom'
import cloudProductItem from './components/cloudProductItem'
import { getAddressList } from '@/api/address'
import { setPickAddOrder } from '@/api/pickOrder'
import { getUser } from '@/api/profile'
export default {
  components: { cloudBottom, cloudProductItem },
  //   过滤器添加小数点
  filters: {
    numFilter(value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    }
  },
  async created() {
    // 选择收获地址后展示
    this.addAddress()
    // 获取云仓提交的数据
    this.getCloudItem()
    const res = await getUser()
    this.goodsMoney = res.data.goods_money
    // console.log(res.data.goods_money)
  },

  //   computed: {
  // getSum() {
  //   const sum = this.productItem.reduce((pre, item) => {
  //     return parseFloat(pre) + parseFloat(item.price)
  //   }, 0)
  //   return sum
  // }
  //   },
  data() {
    return {
      remark: '',
      productItem: '', //展示的商品
      showAdd: '', //顶部展示的地址
      haveaddress: false, //控制地址图标展示
      total: 0, //总价格
      num: 0, //   总件数
      goodsMoney: 0
    }
  },
  methods: {
    //   判断是否有默认地址
    async haveDefault() {
      const res = await getAddressList()
      //   console.log(res.data)  //默认地址
      if (res.code !== 200) {
        return this.$toast(res.msg)
      }
      const defaultAdd = res.data.filter(item => item.is_default === 1)
      if (JSON.stringify(defaultAdd) === '[]') {
        this.haveaddress = false
        return this.$toast('您还没有默认地址,请选择收获地址')
      }
      await this.$nextTick()
      this.haveaddress = true
      this.showAdd = defaultAdd[0]
    },
    // 选择地址后将地址添加
    addAddress() {
      //   this.haveaddress = false
      this.selectAddress = this.$route.query
      if (this.selectAddress.id) {
        this.haveaddress = true
        // console.log(this.selectAddress)
        this.showAdd = this.selectAddress
        // 存一份地址
        return false
      }
      //   获取后台数据，判断是否有默认地址
      this.haveDefault()
    },
    // 从本地获取从云仓提取的商品
    getCloudItem() {
      // const newProduct
      console.log(this.productItem)
      this.productItem = JSON.parse(localStorage.getItem('newProduct'))
      this.num = this.productItem.length
      //   console.log(this.productItem)
    },
    getTotal() {
      let tota = 0
      this.productItem.forEach(item => {
        // 选中的才累加
        if (item.goodsNum) {
          tota += item.goodsNum * item.goodsPrice
        } else {
          tota += item.goodsNum * item.goodsPrice
        }
      })
      return tota
    },
    // 获取总件数
    getNum() {
      let num = 0
      this.productItem.forEach(item => {
        // 选中的才累加
        if (!item.goodsNum) {
          return
        }
        num += item.goodsNum
      })
      return num
    },
    // 通过子组件修改数量动态计算商品价格
    changeGoodsPrice(e) {
      this.total = this.getTotal()
      this.num = this.getNum()
      //   console.log(this.getNum())
    },
    // 确认提货   还要获取贷款余额
    async goDelivery() {
      const {
        id,
        user_id,
        shipping_name,
        shipping_phone,
        shipping_address,
        province,
        city,
        district
      } = this.showAdd
      this.shippingData = {
        id,
        user_id,
        shipping_name,
        shipping_phone,
        shipping_address,
        province,
        city,
        district
      } //收货地址
      //   this.productItem.map(item => {
      //     delete item.kuCun //删除库存
      //   })
      //   console.log(this.total) //所有的产品信息
      //   console.log(this.productItem) //所有的产品信息
      //   //  cunjin localStorage.setItem('setLocalAdd', JSON.stringify(this.setLocalAdd))  //

      //   发请求前获取一下货款余额,判断大于当前的total  否则不能提货成功
      if (this.total > this.goodsMoney) {
        return this.$toast('您的货款余额不足，请充值')
        // this.$router.push({ path: '/recharge' })
      }
      //   this.$router.push('/')
      //   this.$toast('可以去发请求了')

      //   const res = await setPickAddOrder({
      //     orderPrice: this.total, //订单总价
      //     orderGoods: this.productItem, //商品
      //     shippingData: this.shippingData, //地址
      //     remark: this.remark //备注
      //   })
      //   if (res.code != 200) {
      //     this.$toast(res.msg)
      //   }
      //   console.log(res.data)
      this.$toast('提货成功了')
      this.$router.push('/orderForm')
    }
  }
}
</script>

<style lang="less" scoped>
.deliveryConfirmat {
  background: #f7f6fb;
  padding: 12px;
  //   顶部地址
  .addaddress {
    margin-bottom: 12px;
    // padding: 16px 12px;
    width: 351px;
    height: 56px;
    border-radius: 8px;
    // line-height: 56px;
    // background: #ff3040;
    .van-cell {
      margin-top: 6px;
      width: 351px;
      height: 56px;
      border-radius: 8px;
      display: flex;
      align-items: center;
    }
    span {
      font-weight: 600;
      color: #1f0d44;
      margin-top: 6px;
    }
  }
  .address {
    margin-bottom: 12px;
    width: 351px;
    height: 76px;
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 12px;
    .top {
      display: flex;
      font-weight: 600;
      .location {
        width: 18px;
        height: 18px;
        img {
          width: 100%;
          height: 18px;
        }
      }
      .name {
        margin: 0 16px 0 6px;
      }
    }
    .bottomtext {
      //   color: #ff3040;
      margin: 10px 24px;
    }
  }
  //   商品列表
  .product {
    width: 351px;
    position: relative;
    // height: 426px;
    background: #fff;
    border-radius: 9px;
    padding: 12px;
    .top {
      width: 100%;
      height: 36px;
      line-height: 36px;
      //   background-color: #ff3040;
      span {
        vertical-align: middle;
        margin-left: 1px;

        font-weight: 500;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
    // 底部总价
    .press {
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: right;

      //   background-color: #ff3040;
      span {
        &:first-child {
          color: #afabb7;
        }
        &:last-child {
          color: #ff6400;
        }
      }
    }
  }
  //   配送方式
  .delivery {
    // padding: 6px 0;
    width: 351px;
    background-color: #fff;
    // background-color: #ff3040;
    height: 132px; //配送方式的高
    margin: 12px 0;
    padding: 0 12px;
    border-radius: 9px;
    .item {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .left {
        color: #afabb7;
      }
      .right {
        color: #1f0d44;
      }
      .van-cell {
        width: 100%;
        height: 40px;
        padding: 10px 0;
        text-align: center;
      }
    }
  }
  //   货款余额
  .payment {
    padding: 0 12px;
    width: 351px;
    height: 92px;
    background: #ffffff;
    border-radius: 9px;
    .item {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .left {
        color: #afabb7;
      }
      .right {
        color: #1f0d44;

        font-weight: 400;
      }
    }
  }
  //   底部样式覆盖
  .bottom {
    padding-top: 58px;
    ::v-deep {
      .left {
        font-size: 12px;
        font-weight: 600;
        color: #ff6400;
      }
    }
  }
  #notRight {
    ::v-deep {
      .right {
        background: #afabb7;
      }
    }
  }
}
</style>
